<template>
  <view
      class="imagesOss"
      :style="{ borderRadius: borderRadius, width: width, height: height }"
      @click="handleToDetail"
  >
    <image
        :mode="mode"
        :show-menu-by-longpress="showMenu"
        :src="src ? handleOss(src) : defaultSrc"
        :style="{ borderRadius: borderRadius, width: width, height: height }"
    ></image>
  </view>
</template>
<script>
import imgOssUtils from "@/utils/ImgOssUtils";

export default {
  name: "ImgOss",
  props: {
    /** 图片裁剪模式 */
    mode: {
      type: String,
      default: "scaleToFill",// aspectFit --全展示
    },
    src: {
      type: Array,
      default: "",
    },
    // 默认图片  '/static/images/icon--default.png'
    defaultSrc: {
      type: String,
      default: "",
    },
    width: {
      type: String,
      default: "686rpx",
    },
    height: {
      type: String,
      default: "280rpx",
    },
    /** 图片懒加载 */
    lazyLoad: {
      type: Boolean,
      default: false,
    },
    //圆角
    borderRadius: {
      type: String,
      default: "0",
    },
    /** 是否可以长按识别小程序码*/
    showMenu: {
      type: Boolean,
      default: true
    },
  },
  methods: {
    handleToDetail() {
      this.$emit("click");
    },
    /** 处理图片 */
    handleOss(src) {
      const width = this.width.toString().match(/\d+/)?.[0] || "";
      const height = this.height.toString().match(/\d+/)?.[0] || "";
      return imgOssUtils.loadImage(src, width, height);
    },
  },
}
</script>
<style scoped lang="scss">
.imagesOss {
  overflow: hidden;
}
</style>
